<template>
  <view class="container">
     <img class="img1" src="@/static/farm.jpg" alt="img1">
     <img class="img2" src="@/static/bac1.png" alt="img2">
    <view class="reg-form">
      <view class="account">
         <text>手机号：</text>
      <input v-model="registerData.username" type="text" />
      </view>
      <view class="pwd">
        <text>密码：</text>
        <input v-model="registerData.password" type="password" />
      </view>
      <view class="repwd">
        <text>确认密码：</text>
        <input v-model="confirmPassword" type="password" />
      </view>
      <button class="btn_reg" @click="register">注册</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      registerData: {
        username: '',
        password: ''
      },
      confirmPassword: ''
    };
  },
  methods: {
    register() {
      // 校验用户名和密码是否为空
      if (!this.registerData.username || !this.registerData.password || !this.confirmPassword) {
        uni.showToast({
          title: '用户名和密码不能为空',
          icon: 'none'
        });
        return;
      }
      // 校验密码和确认密码是否一致
      if (this.registerData.password !== this.confirmPassword) {
        uni.showToast({
          title: '确认密码与密码不一致',
          icon: 'none'
        });
        return;
      }
      
      // 模拟保存用户信息，实际中需要调用后端接口保存
      let users = uni.getStorageSync('users') || [];
      let existingUser = users.find(user => user.username === this.registerData.username);
      if (existingUser) {
        uni.showToast({
          title: '该手机号已注册，请直接登录',
          icon: 'none'
        });
        return;
      }
      
      // 保存用户信息
      users.push({ username: this.registerData.username, password: this.registerData.password });
      uni.setStorageSync('users', users);
      
      uni.showToast({
        title: '注册成功',
        icon: 'success'
      });
      
      // 注册成功后的逻辑，比如跳转到登录页
      uni.navigateTo({
        url: '/pages/index/index'
      });
    }
  }
};
</script>

<style scoped>
input {
  width: 150px;
  height: 30px; /* 设置输入框的高度 */
 
}
.btn_reg {
  height: 43px; /* 设置按钮的高度 */
  width: 100px;
  font-size: 25px;
  background-color: transparent;
  border: 3px solid black; /* 设置按钮边框为黑色加粗 */
  border-radius: 18px; /* 设置按钮圆角 */
  line-height: 43px; /* 设置按钮文本的行高与按钮高度相等，使文本垂直居中 */
}
.container {
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 102vh;
}

.account,.pwd,.repwd{
  display: flex;
  height:30px;
}
.img1{
z-index: 0;
position: absolute;
height: 100%;
width: 100%;
}
.img2{
  z-index: 1;
  position: absolute;
  margin-top: 40px;
}
.reg-form {
  font-size: 25px;
  margin-top: 40px;
  margin-left: 30px;
  width: 50%;
  z-index: 1;
  position: absolute;
}
</style>
